<template>
  <div id="login">

    <div class="box">
      <div class="box1">
        <h2>登录账号</h2>
        <p>虾米-严选商城欢迎您</p>
      </div>
     <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="用户名"
       
        placeholder="手机号码"
       
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        
        placeholder="密码"
      
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit" >
          登陆
        </van-button>
      </div>
    </van-form> 
    <div class="box2">
      <p>忘记密码</p>
      <span>还没有注册？</span>
      <span>立即注册</span>
    </div>
    </div>

  </div>
</template>

<script>
import { getlogin } from '../utils/api' 
import { Toast } from 'vant';
export default {
  name: "",
  data() {
    return {
        username:'',
        password:''
    };
  },
  created() {},
  methods: {
      onSubmit(){
          const obj={
              mobile:this.username,
              pwd:this.password

          }
          if(this.username==''||this.password==''){
            Toast('请输入账号或密码');
            return
          }
          getlogin(obj).then(res=>{
               localStorage.setItem("token",res.data.data.token)
                
             
            this.$router.push('/home')
              
             
          })
         
      }
  },
};
</script>

<style scoped lang='scss'>

.box{
  margin-top: 20px;
  height: 600px;
  width: 90%;
  border: 1px solid #cccc;
  margin-left: 20px;
  border-radius: 5px;
  h2{
    width: 80%;
    height: 50px;
   
    font-size: 22px;
    margin-top: 50px;
    margin-left: 15px;
    line-height: 50px;
    font-weight: 500;
    color: #666666;
  }
  p{
     width: 80%;
    height: 50px;
   
    
    margin-top: 20px;
    margin-left: 15px;
    line-height: 50px;
    margin-bottom: 20px;
    color: #666666;
  }
  .box2{
    width: 80%;
    height: 80px;
    // border: 1px solid;
    margin: 0 auto;
    text-align: center;
    margin-top: 20px;
    p{
      font-size: 16px;
      color: #cccc;
      margin-top: 20px;
      margin-bottom: 20px;
    }
  span{
    margin-top: 20px;
    color:blue;
  }
  }
  

/deep/.van-button--round{
   width: 220px;
   height: 60px;
 margin-left: 40px;
     background: linear-gradient(135deg, #e570e7 0%, #79f1fc 100%);
     border: 0;
}
/deep/.van-button--round{
  border-radius:5px ;
  background-color: #ccc;
}
/deep/ .van-cell{
  height: 50px;
  background-color: #F5F5F5;
  margin-top: 20px;
  width: 90%;
  border-radius: 5px;
  margin-left: 15px;
  color: black;
 
}
}
</style>